
  // 定义全局 变量 存储ajax请求的异步结果
  let detailObj;

  // 调用函数 根据浏览器地址栏参数数据 动态渲染 生成页面
  setPage();

  // 在这里调用 detailObj 是同步程序 还没有 执行 setPage() 
  // detailObj 存储的数值是 0

  // 给父级标签添加点击事件
  const oContainer = document.querySelector('.container');
  oContainer.addEventListener('click', function (event) {
    // 在点击事件里调用 detailObj 
    // 触发事件时 setPage() 已经执行结束 
    // detailObj 已经赋值 ajax请求的响应体数据 
    // 可以调用数据的


    // - 减号 操作
    if (event.target.getAttribute('name') === '-') {

      // 获取标签中存储的数值 转化为数值类型
      let num = Number($('[name="val"]').val());

      // 对于获取结果需要添加验证判断 


      // input标签输入的数值累减 1 
      // 使用前缀语法 先执行累加 使用累减后的结果 赋值给标签
      // 如果 小于1 赋值 1 不小于1 就赋值累减之后num的数值 
      $('[name="val"]').val(--num < 1 ? 1 : num);

      // + 加号 操作 
    } else if (event.target.getAttribute('name') === '+') {
      // 获取 input标签的数值 
      let num = Number($('[name="val"]').val());

      // 将 存储的数值 累加1 赋值给 input标签
      $('[name="val"]').val(++num > detailObj.goods_number ? detailObj.goods_number : num);

      //  点击的是 加入购物车按钮
    } else if (event.target.getAttribute('name') === 'cart') {

      // 1, 获取cookie 判断有没有登录信息 
      const cookieObj = myGetCookie();

      // 判断 有没有 login 登录信息
      if (cookieObj.login === undefined) {
        // 没有登录信息  弹出确认框 点击确定 跳转登录页面
        if (window.confirm('您还没有登录 点击确定 跳转登录页')) {
          window.location.href = `./login.html?url=${window.location.href}`;
        }


        // 有登录信息 当前商品存储到购物车数据库中 跳转购物车页面
      } else {
        // 获取 localStorage 中 购物车的数据信息 
        let cartObj = window.localStorage.getItem('cart');

        console.log(cartObj);

        if (cartObj === null) {
          // 证明 还没有创建购物车数据

          // 当前商品数据 存储在 detailObj 对象中 

          // 获取 input标签 购买数量
          let num = Number($('[name="val"]').val());

          // 输入的数值 转护为 数值类型 结果是 NaN 
          // 证明输入的不是数值类型 
          if (isNaN(num)) {
            // 弹出提示信息
            window.alert('购买数量必须是数值');

            // 终止之后程序的执行
            return;
          }

          // 是数值 判断 数值范围 在 1 至 库存之间 

          // 小于1 
          if (num < 1) {
            // 弹出提示信息
            window.alert('您至少要购买一件商品');

            // 将 1 输入到 input标签中
            $('[name="val"]').val(1);

            // 终止之后程序的执行
            return;

          } else if (num > detailObj.goods_number) {
            // 弹出提示信息
            window.alert(`当前商品您最多购买${detailObj.goods_number}件`);

            // 将 库存数值 输入到 input标签中
            $('[name="val"]').val(detailObj.goods_number);

            // 终止之后程序的执行
            return;
          }

          // 购买商品数量 符合 1 至 库存 新增属性 存储 购买数量
          detailObj.num = num;

          // 新增购买状态 默认值 true 是 购买状态
          detailObj.buy = true;

          // 将 当前商品数据对象 以 数组存储 
          // 转化为 json字符串 存储到 localStorage 中
          window.localStorage.cart = JSON.stringify([detailObj])


          // 证明 有 购物车 数据信息 
          // 购物车 数据信息 是 json字符串 
        } else {
          // 将 购物车数据信息 还原为对应的数据类型
          cartObj = JSON.parse(cartObj);

          // 如果 cartObj 数组长度是 0 表示是 空数组 
          if (cartObj.length === 0) {
            // 如果是 空车 
            // 将 当前商品数据的对象 新增 购买状态 和 购买数量 属性


            // 获取 input标签 购买数量
            let num = Number($('[name="val"]').val());

            // 输入的数值 转护为 数值类型 结果是 NaN 
            // 证明输入的不是数值类型 
            if (isNaN(num)) {
              // 弹出提示信息
              window.alert('购买数量必须是数值');

              // 终止之后程序的执行
              return;
            }

            // 是数值 判断 数值范围 在 1 至 库存之间 

            // 小于1 
            if (num < 1) {
              // 弹出提示信息
              window.alert('您至少要购买一件商品');

              // 将 1 输入到 input标签中
              $('[name="val"]').val(1);

              // 终止之后程序的执行
              return;

            } else if (num > detailObj.goods_number) {
              // 弹出提示信息
              window.alert(`当前商品您最多购买${detailObj.goods_number}件`);

              // 将 库存数值 输入到 input标签中
              $('[name="val"]').val(detailObj.goods_number);

              // 终止之后程序的执行
              return;
            }

            // 购买商品数量 符合 1 至 库存 新增属性 存储 购买数量
            detailObj.num = num;

            // 新增购买状态
            detailObj.buy = true;


            // 将 新对象 unshift() 写入 购物车数组的起始位置
            cartObj.unshift(detailObj);

            // 将 新数组 转化为json字符串 存储到 localStorage 中
            window.localStorage.cart = JSON.stringify(cartObj);


            // 不是空车 
          } else {
            // 判断 当前商品 在不在 购物车中 
            // 使用 some() 函数 判断 cartObj 这个数组中 对象存储的goods_id 和 当前商品的 goods_id 有没有相同的
            let bool = cartObj.some(function (item) {
              return item.goods_id === detailObj.goods_id;
            })

            console.log(bool);


            if (bool) {
              console.log(cartObj);

              // bool 存储 true 证明 当前商品已经存在 购物车 购买商品数量的累加
              // 循环遍历 购物车数组 
              for (let i = 0; i <= cartObj.length - 1; i++) {
                //  i 是 索引下标  cartObj[i] 是 购物车数据中每一个商品数据对象 
                //  判断 和 当前商品的goods_id 如果相同 
                if (cartObj[i].goods_id === detailObj.goods_id) {

                  // 获取input输入框数据 转化为 数值类型
                  let num = Number($('[name="val"]').val());

                  if (isNaN(num)) {
                    window.alert('您必须输入数值类型');
                    return;
                  }

                  // 当前商品已经购买的数量 + input数值框的购买数量 不能超过 库存
                  if (cartObj[i].num + num > Number(cartObj[i].goods_number)) {
                    window.alert(`当前商品您已经购买了${cartObj[i].num}件,您最多还能卖${Number(cartObj[i].goods_number) - cartObj[i].num}件`);

                    // 将可以购买的最大值 写入 input标签 
                    $('[name="val"]').val(Number(cartObj[i].goods_number) - cartObj[i].num);

                    return;

                    // 如果输入数值 小于 1
                  } else if (num < 1) {
                    // 弹出提示信息
                    window.alert('您至少要购买一件商品');

                    // 将 1 输入到 input标签中
                    $('[name="val"]').val(1);

                    // 终止之后程序的执行
                    return;
                  }

                  // 如果 input输入框输入的购买数量 符合 条件 
                  // 执行 存储 数值累加 
                  // 当前商品 num属性 存储的购买数量 累加 input输入框 输入的购买数量
                  cartObj[i].num += num;

                  // 将 新的数组数据 转化为 json字符串 存储到 localStorage 中
                  window.localStorage.cart = JSON.stringify(cartObj);

                  // 终止之后的循环
                  break;
                }
              }


            } else {
              // 购物车中没有当前商品
              // 当前商品 新增 购买状态和购买数量 写入 数组的起始位置
              // 将新数组 转化为 json 字符串 存储到 localStorage 中 
              // 获取 input标签 购买数量
              let num = Number($('[name="val"]').val());

              // 输入的数值 转护为 数值类型 结果是 NaN 
              // 证明输入的不是数值类型 
              if (isNaN(num)) {
                // 弹出提示信息
                window.alert('购买数量必须是数值');

                // 终止之后程序的执行
                return;
              }

              // 是数值 判断 数值范围 在 1 至 库存之间 

              // 小于1 
              if (num < 1) {
                // 弹出提示信息
                window.alert('您至少要购买一件商品');

                // 将 1 输入到 input标签中
                $('[name="val"]').val(1);

                // 终止之后程序的执行
                return;

              } else if (num > detailObj.goods_number) {
                // 弹出提示信息
                window.alert(`当前商品您最多购买${detailObj.goods_number}件`);

                // 将 库存数值 输入到 input标签中
                $('[name="val"]').val(detailObj.goods_number);

                // 终止之后程序的执行
                return;
              }

              // 购买商品数量 符合 1 至 库存 新增属性 存储 购买数量
              detailObj.num = num;

              // 新增购买状态
              detailObj.buy = true;


              // 将 新对象 unshift() 写入 购物车数组的起始位置
              cartObj.unshift(detailObj);

              // 将 新数组 转化为json字符串 存储到 localStorage 中
              window.localStorage.cart = JSON.stringify(cartObj);


            }


          }

        }

        // 跳转购物车页面
        window.location.href = './cart.html';
      }

    }
  })




// 定义一个函数 发送 ajax请求 动态渲染生成页面
async function setPage() {
  // 获取 浏览器地址栏携带数据参数
  const urlObj = getUrlValObj();

  // 发送请求
  let res = await myPromiseAjax({
    url: '../server/goods_detail.php',
    type: 'post',
    data: { goods_id: urlObj.goods_id }
  });

  res = JSON.parse(res);

  // 将 响应体结果 存储到 全局变量 
  detailObj = res;

  console.log(res);
  

  // 动态渲染生成页面
  let str = `
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">商品详细信息</h3>
  </div>
  <div class="panel-body">
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="${res.goods_big_logo}" alt="...">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">${res.goods_name}</h4>
        <p>
          <i class="glyphicon glyphicon-yen"></i>
          <span>${res.goods_price}</span>
        </p>
        <div class="btn-group" role="group" aria-label="...">
          <button type="button" class="btn btn-default">XL</button>
          <button type="button" class="btn btn-default">L</button>
          <button type="button" class="btn btn-default">M</button>
          <button type="button" class="btn btn-default">S</button>
          <button type="button" class="btn btn-default">XS</button>
        </div>
        <p style="position:relative">
          <input name="val" value="1" class="num">
          <button name="-" type="button" class="jian btn btn-default">-</button>
          <button name="+" type="button" class="jia btn btn-default">+</button>
        </p>
        <p>
          <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
          <a name="cart" href="JavaScript:;" class="btn btn-danger btn-lg" role="button">加入购物车</a>
        </p>
      </div>
    </div>
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
      <li role="presentation"><a href="#">商品参数信息</a></li>
      <li role="presentation"><a href="#">相关商品</a></li>
    </ul>
    <div>
        ${res.goods_introduce}
    </div>
  </div>
</div>

`;

  // 写入标签中
  $('.container').html(str);

}
